Show minor edits - Show changes to output
!!-Custom Loading Bar
!!-Custom Loading Bar by Axion
!!-Custom Loading Bar
This tutorial will show you how to create your own custom loading bar. Let's get started!
!!What you will need before you begin:
----
Pakscape (Or some other way to manage .pk3 files)
An Image editing program that can open/edit tga files: I recommend using Adobe Photoshop for this tutorial, as that is what I used. If you have a different program such as Paint Shop Pro, you're going to be on your own as far as creating your own custom loading bar and border.
----
!!Step 1: (Grabbing the source materials)
The first two files that we need are the image files that make up the loading bar (loadingbar.tga and loadingbar_border.tga), so go to your main folder and open up pak1:
textures --> mohmenu (That's where they're located at)
Now that you've found them, copy them and put them on your desktop. The next thing we need is loadingbar.txt, which serves as the shader for those two images. You can grab that by opening up pak0 and looking in the ui folder:
Now that we have the necessary files, we're ready to proceed to the next step.
!!Step 2: Editing Magic
You have two general options here:
----
-You can simply change the color of the bar that fills up as the level loads (The most common option)
-You can go all out and redo the border as well for a completely original design (Takes more time but is generally worth the effort for the extra eye-candy)
----
For the purposes of this tutorial, we're going to go all-out. Open up loadingbar_border.tga, and take note that the image size is 256 x 16, because we're going to use that information later on. We're now going to create our own loading bar border, so go ahead and create a new image (The size doesn't matter, mine was 1024 x 768 pixels) with a transparent background.
Select the gradient tool by pressing "G". Now set the tool to linear gradient in the Gradients Palette and choose the copper preset. Take your mouse to the top left and click and drag to the bottom right. This will create a copper gradient that will fill up your entire image.
Next go to filter > Add Noise. Select a percentage of 12.5 and check the Gaussian and Monochromatic options. Now, go to filter > blur > motion blur. Set the angle to 0 and adjust to the distance to somewhere between 20 and 25. You should now have what looks like a big piece of brushed metal.
If you don't like the copper look and want a different color, go to Image > Adjustments > Hue/Saturation (Or hit Ctrl + U). Check the colorize box and fiddle with the sliders until you've found a color you're satisfied with. Now, rezsize the image to the size it needs to be in the game (256 x 16). Once it's resized, we need to remove a section out of the middle for where the loading bar will show. You can do that by using the selection tool, making a rectangle insde the bar, and cutting it out. Once you've done that, save your image (use a different name).
Now, open up loadingbar.tga and edit it however you wish and save it (use a different name). We only have a few more things to do before we're done!
!!Step 3: Putting it all together in a .pk3
First, we need to modify our copy of loadingbar.txt, so open it up and locate the entries for the loadingbar and loadingbar_border images and change those names to whatever you named your respective versions.
Once you've made the changes, save it. Now we're ready to pack it all up, so make a folder called textures. Create a subfolder inside named mohmenu and drop both of your loading bar images inside there. Go back to the main directory and make another folder named ui and drop your copy of loadingbar.txt in there. Now save it all as a pk3 file and load a map to test it out!
You can view the original tutorial here:
[[http://www.freewebs.com/axion9/tutorialsloadingbar.htm]]